<template>
	<view class="dam-flex_row jz-content-line" :style="{height:isMutliLine?'auto':height}">
		<view class="dam-flex_row jz-title" :style="{width:titleWidth}">
			{{title}}
		</view>
		<!-- <view class="dam-flex_row jz-content" :style="{textAlign: align,justifyContent:align}">
			{{content}}{{contentUnit}}
		</view> -->
		<view :class="'dam-flex_row jz-content '+(isMutliLine?'mutli':'')"
			:style="{justifyContent:align,width:'calc(100% - '+titleWidth+')'}">
			<text>{{content}}{{contentUnit}}</text>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { watch, ref, onMounted } from 'vue';

	const height = ref('30px');
	const props = defineProps({
		/**
		 * 是否是多行
		 */
		isMutliLine: {
			type: Boolean,
			default: false
		},
		/**
		 * 标题
		 */
		title: {
			type: String,
			default: ''
		},/**
		 * 内容
		 */
		content: {
			type: [String, Number],
			default: ''
		},
		titleColor: {
			type: String,
			default: '#808080'
		},
		contentColor: {
			type: String,
			default: '#1b1b1b'
		},
		/**
		 * 内容方向，默认左对齐
		 */
		align: {
			type: String,
			default: 'flex-start'
		},
		/**
		 * 规格：小中大 small normal big
		 */
		spec: {
			type: String,
			default: 'normal'
		},
		titleWidth: {
			type: String,
			default: '80px'
		},
		contentUnit: {
			type: String,
			default: ''
		}
	})
	watch(() => props.spec, (newValue, oldValue) => {
		if (newValue === 'small') {
			height.value = '24px';
		} else if (newValue === 'normal') {
			height.value = '30px';
		} else if (newValue === 'big') {
			height.value = '36px';
		}
	}, { immediate: true });
</script>

<style lang="scss">
	@import "/dam_uni_frame/styles/dam_theme_common.scss";

	.jz-content-line {
		width: 100%;
		min-height: v-bind(height);
		align-items: center;
	}

	.jz-title {
		height: 100%;
		// width: 80px;
		color: v-bind(titleColor);
		font-size: $dam-size-font-title2;
		text-align: center;
		align-items: center;
	}

	.jz-content {
		// flex: 1;
		padding-left: 20rpx;
		box-sizing: border-box;
		color: v-bind(contentColor);
		font-size: $dam-size-font-content2;
		align-items: center;

		text {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
	
	.jz-content.mutli {
		text {
			white-space: pre-wrap;
			text-align: end;
		}
	}
	
</style>